<template>
  <div class="layout container">
    <Sider :isCollapse="isCollapse" :style="style"></Sider>
    <div class="main-container layout">
      <Header :rotate="rotate" @switch="handleSwitch"></Header>
      <div class="main w100 h100">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          class="inline-block mb20 w100 relative"
        >
          <el-breadcrumb-item style="font-size: 24px;">{{
            parentBreadcrumb
          }}</el-breadcrumb-item>
          <el-breadcrumb-item style="font-size: 22px;">{{
            breadcrumb
          }}</el-breadcrumb-item>
          <GoBack v-if="hasGoBack" class="go-back" />
        </el-breadcrumb>
        <section class="h100">
          <transition name="fade-transform" mode="out-in">
            <router-view :key="key" />
          </transition>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import Sider from "@/components/sider";
import GoBack from "@/components/go_back";
import Header from "@/components/header";

export default {
  name: "Layout",
  data() {
    return {
      tabs: [],
      tabIndex: 0,
      rotate: false,
      userInfo: false,
      isCollapse: true,
      modifyPassword: false,
      close: {
        flex: "0 0 65px",
        width: "65px"
        // maxWidth: "80px",
        // minWidth: "80px"
      },
      open: {
        flex: "0 0 200px",
        width: "200px"
        // maxWidth: "200px",
        // minWidth: "200px"
      },
      activeTab: sessionStorage.getItem("activeTab")
    };
  },
  computed: {
    style() {
      return this.isCollapse ? this.close : this.open;
    },
    key() {
      return this.$route.path;
    },
    hasGoBack() {
      return this.$route.meta.hasGoBack;
    },
    breadcrumb() {
      return this.$route.meta.title;
    },
    parentBreadcrumb() {
      return this.$route.meta.parentTitle;
    }
  },
  methods: {
    handleGoHome() {
      this.$router.push({ name: "layout" });
    },
    handleSwitch() {
      if (this.isCollapse) {
        // this.marginLeft = "200px";
        this.rotate = !this.rotate;
        this.isCollapse = !this.isCollapse;
      } else {
        // this.marginLeft = "65px";
        this.rotate = !this.rotate;
        this.isCollapse = !this.isCollapse;
      }
    },
    handleModifyPass() {
      this.userInfo = !this.userInfo;
      this.modifyPassword = !this.modifyPassword;
    },
    handleClose() {
      this.modifyPassword = !this.modifyPassword;
    }
  },
  components: {
    Sider,
    GoBack,
    Header
  }
};
</script>

<style></style>
